<template>
	<view class="WalletRecord">
		<u-navbar title="钱包流水" :placeholder="true" :auto-back="true" bg-color="#F6F8FA"></u-navbar>
		<view class="record_box">
			<view class="record_main">
				<view v-for="(item,index) in list" :key="index" class="record_item">
					<view class="flex_box flex_row_between record_top">
						<view class="record_top_title">提现金额</view>
						<view class="record_top_price">￥<text>{{item.money}}</text></view>
					</view>
					<view class="flex_box flex_row_between record_option">
						<view>提现时间</view>
						<view>{{item.createtime}}</view>
					</view>
					<view class="flex_box flex_row_between record_option">
						<view>提现状态</view>
						<view class="record_option_status" :style="{color: item.status_text==='审核中'?'#FFD32A':item.status_text==='已通过'?'#1DDDD9':'#FF3F34'}">{{item.status_text}}</view>
					</view>
				</view>
			</view>
			<view v-if="listStatus==='nomore'&&list.length===0" class="empty_box">
				<u-empty mode="data" icon="/static/empty/data.png" text="亲，该时间段还没有流水记录哦！"></u-empty>
			</view>
			<block v-else>
				<u-loadmore :line="true" @loadmore="getMore" :status="listStatus"></u-loadmore>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		userWalletRecord,
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				params: {
					page: 1,
				},
				list: [],
				listStatus: "loading",
			}
		},
		onLoad(options) {
			that = this;
			that.getList();
		},
		onReachBottom() {
			that.getMore();
		},
		methods: {
			// 获取列表
			getList(){
				userWalletRecord({params: that.params}).then(res => {
					let list = res.data.data;
					that.listStatus = list.length < res.data.per_page ? "nomore" : "loadmore";
					that.list = [...that.list,...list];
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// 点击加载更多
			getMore(){
				that.listStatus==="loadmore"&&(that.params.page++,that.listStatus = "loading",that.getList());
			},
		}
	}
</script>

<style lang="scss" scoped>
	.WalletRecord{
		min-height: 100vh;
		background-color: #F6F8FA;
		.record_box{
			padding: 36rpx;
			.record_main{
				.record_item{
					background: #FFFFFF;
					border-radius: 12rpx;
					margin-bottom: 36rpx;
					padding: 36rpx;
					.record_top{
						height: 50rpx;
						margin-bottom: 28rpx;
						.record_top_title{
							font-size: 32rpx;
							color: #1E272E;
							font-weight: bold;
						}
						.record_top_price{
							font-size: 24rpx;
							color: #FF3F34;
							font-weight: bold;
							text{
								font-size: 40rpx;
							}
						}
					}
					.record_option{
						height: 36rpx;
						margin-bottom: 16rpx;
						font-size: 24rpx;
						color: #808E9B;
						font-weight: 500;
						.record_option_status{
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>
